<div class="fixed w-64 h-screen bg-slate-800 text-white z-50 flex flex-col left-0 top-0">
    <div class="p-5 border-b border-slate-700 flex items-center justify-center">
        <h1 class="text-lg font-semibold m-0 text-center">博客管理后台</h1>
    </div>
    
    <nav class="p-5 flex-1 overflow-y-auto scrollbar-hide">
        <div class="mb-5">
            <div class="px-5 pb-1 text-xs text-slate-400 uppercase tracking-wider">主要内容</div>
            <a href="{{ url_for('main.admin_dashboard') }}" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="dashboard">
                <i class="fas fa-tachometer-alt w-5 mr-2"></i>
                <span>仪表盘</span>
            </a>
            <a href="{{ url_for('main.admin_posts') }}" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="posts">
                <i class="fas fa-file-alt w-5 mr-2"></i>
                <span>文章管理</span>
            </a>
        </div>
        
        <div class="mb-5">
            <div class="px-5 pb-1 text-xs text-slate-400 uppercase tracking-wider">内容管理</div>
            <a href="{{ url_for('main.admin_categories') }}" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="categories">
                <i class="fas fa-folder w-5 mr-2"></i>
                <span>分类管理</span>
            </a>
            <a href="/admin/tags" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="tags">
                <i class="fas fa-tags w-5 mr-2"></i>
                <span>标签管理</span>
            </a>
            <a href="/admin/comments" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="comments">
                <i class="fas fa-comments w-5 mr-2"></i>
                <span>评论管理</span>
            </a>
        </div>
        
        <div class="mb-5">
            <div class="px-5 pb-1 text-xs text-slate-400 uppercase tracking-wider">个人中心</div>
            <a href="/admin/profile" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="profile">
                <i class="fas fa-user w-5 mr-2"></i>
                <span>个人资料</span>
            </a>
            <a href="/admin/account" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="account">
                <i class="fas fa-user-cog w-5 mr-2"></i>
                <span>账户设置</span>
            </a>
        </div>
        
        <div class="mb-5">
            <div class="px-5 pb-1 text-xs text-slate-400 uppercase tracking-wider">系统</div>
            <a href="/admin/settings" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500" data-route="settings">
                <i class="fas fa-cog w-5 mr-2"></i>
                <span>系统设置</span>
            </a>
            <a href="{{ url_for('main.index') }}" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500">
                <i class="fas fa-home w-5 mr-2"></i>
                <span>返回前台</span>
            </a>
            <a href="{{ url_for('auth.logout') }}" class="nav-item block py-3 px-5 text-slate-200 no-underline transition-all duration-300 border-l-4 border-transparent hover:bg-slate-700 hover:border-blue-500">
                <i class="fas fa-sign-out-alt w-5 mr-2"></i>
                <span>退出登录</span>
            </a>
        </div>
    </nav>
</div>

<style>
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.nav-item.active {
    background-color: #2563eb !important;
    border-left-color: #3b82f6 !important;
    color: white !important;
}

.nav-item.active:hover {
    background-color: #1d4ed8 !important;
}
</style>

<script>
// 菜单激活管理
function activateMenu() {
    const path = window.location.pathname;
    
    // 移除所有激活状态
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // 路由映射
    let activeRoute = null;
    
    if (path === '/admin' || path === '/admin/') {
        activeRoute = 'dashboard';
    } else if (path.startsWith('/admin/posts')) {
        activeRoute = 'posts';
    } else if (path.startsWith('/admin/categories')) {
        activeRoute = 'categories';
    } else if (path.startsWith('/admin/tags')) {
        activeRoute = 'tags';
    } else if (path.startsWith('/admin/comments')) {
        activeRoute = 'comments';
    } else if (path.startsWith('/admin/profile')) {
        activeRoute = 'profile';
    } else if (path.startsWith('/admin/account')) {
        activeRoute = 'account';
    } else if (path.startsWith('/admin/settings')) {
        activeRoute = 'settings';
    }
    
    if (activeRoute) {
        const activeItem = document.querySelector(`[data-route="${activeRoute}"]`);
        if (activeItem) {
            activeItem.classList.add('active');
        }
    }
}

// 页面加载完成后初始化菜单激活
document.addEventListener('DOMContentLoaded', function() {
    activateMenu();
});
</script>
